<template>
	<view>
		<ul class="personal">
			<li class="flex justify-between items-center">
				<Icon type="iconwenhao"></Icon>
				<view class="flex-1"><input type="number" v-model.trim="phone" placeholder="请输入手机号码" /></view>
			</li>
			<li class="flex justify-between items-center">
				<Icon type="iconwenhao"></Icon>
				<view class="flex-1"><input type="number" v-model.trim="code" placeholder="请输入验证码" /></view>
				<view class="captcha" @click="getCode">
					<text v-if="count.canGet">{{count.tip}}</text>
					<text v-else>{{ count.time }}S</text>
				</view>
			</li>
		</ul>
		<view><button class="withdraw-btn mainColor border-25" @click="sub">确定</button></view>
	</view>
</template>

<script>
let App = getApp().globalData;
console.log(App);
import Icon from '@/components/Icon/Icon.vue';
import { judge, Regular } from '@/utils/tool.js';

export default {
	// name:'身份认证',
	data() {
		return {
			phone: '',
			code: '',
			count: {
				createTime: null,
				time: 60,
				canGet: true,
				tip:'获取验证码'
			}
		};
	},
	methods: {
		verification() {
			var regular = new Regular();
			let _self = this;
			if (!_self.phone) {
				App.showToast({
					title: '手机号码不能为空',
					icon: 'none'
				});
				return false;
			}

			if (regular.mobilePhone(_self.phone)) {
				App.showToast({
					title: '手机号码输入不正确',
					icon: 'none'
				});
				return false;
			}
			return true;
		},
		sub() {
			if (this.verification()) return false;
			if (!this.code) {
				App.showToast({
					title: '验证码不能为空',
					icon: 'none'
				});
				return false;
			}
		},
		getCode() {
			if(!this.verification()) return false;
			if (this.count['canGet']) {
				this.countdown();
			}
		},

		countdown(num) {
			clearInterval(this.count['createTime']);
			let n = num || 60;
			this.count['canGet'] = false;
			this.count['createTime'] = setInterval(
				function() {
					n--;
					if (n <= 0) {
						this.count['canGet'] = true;
						this.count['tip'] = '重新获取';
						clearInterval(this.count['createTime']);
					}
					this.count['time'] = n;
				}.bind(this),
				1000
			);
		}
	}
};
</script>

<style lang="less">
@import '../withdrawSet/form.less';

</style>
